import React, { useEffect, useState } from "react";
import { AntDesign } from "@expo/vector-icons";
import { Text, TouchableOpacity, View, StyleSheet } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";

export default function Game_Select({ navigation,route}) {
    const [startGameEasy, setStartGameEasy] = useState(0);
    const [startGameMid, setStartGameMid] = useState(0);
    const [startGameHard, setStartGameHard] = useState(0);

    useEffect(() => {
        const loadRecords=async()=>{
            try{
                const showStartGameEasy=await AsyncStorage.getItem('startGameEasy');
                const showStartGameMid=await AsyncStorage.getItem('startGameMid');
                const showStartGameHard=await AsyncStorage.getItem('startGameHard');
                if(showStartGameEasy!==null){
                    setStartGameEasy(JSON.parse(showStartGameEasy));
                }
                if(showStartGameMid!==null){
                    setStartGameMid(JSON.parse(showStartGameMid));
                }
                if(showStartGameHard!==null){
                    setStartGameHard(JSON.parse(showStartGameHard));
                }
            }catch(error){
                console.error("Error loading records:",error);
            }
        };
        loadRecords();
    }, []);

    const saveStartGameEasy=async()=>{
        try{
            await AsyncStorage.setItem("startGameEasy",JSON.stringify(startGameEasy+1));
            setStartGameEasy(startGameEasy+1);
        }catch(error){
            console.error("Erroe saving startGameEasy:",error);
        }
    }
    const saveStartGameMid=async()=>{
        try{
            await AsyncStorage.setItem("startGameMid",JSON.stringify(startGameMid+1));
            setStartGameMid(startGameMid+1);
        }catch(error){
            console.error("Erroe saving startGameMid:",error);
        }
    }
    const saveStartGameHard=async()=>{
        try{
            await AsyncStorage.setItem("startGameHard",JSON.stringify(startGameHard+1));
            setStartGameHard(startGameHard+1);
        }catch(error){
            console.error("Erroe saving startGameHard:",error);
        }
    }

    return (
        <View style={styles.container}>
            <View style={styles.buttonContainer}>
            <TouchableOpacity 
                style={styles.buttonWithIcon}
                onPress={() => {saveStartGameEasy();navigation.navigate("Game_main",{ loadSavedGame: false, level: 1})}}
            >
                <AntDesign name="rightcircle" size={25} color="black" />
                <Text style={styles.buttonText}> 简单模式</Text>
            </TouchableOpacity>
            <TouchableOpacity 
                style={styles.buttonWithIcon}
                onPress={() => {saveStartGameMid();navigation.navigate("Game_main",{ loadSavedGame: false, level: 2,})}}
            >
                <AntDesign name="rightcircle" size={25} color="black" />
                <Text style={styles.buttonText}> 中等模式</Text>
            </TouchableOpacity>
            <TouchableOpacity 
                style={styles.buttonWithIcon}
                onPress={() => {saveStartGameHard();navigation.navigate("Game_main",{ loadSavedGame: false,level: 3 })}}
            >
                <AntDesign name="rightcircle" size={25} color="black" />
                <Text style={styles.buttonText}> 困难模式</Text>
            </TouchableOpacity>
            </View>
        </View>
    )
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    buttonContainer: {
        width: "100%",
        alignItems: "center",
    },
    buttonWithIcon: {
        flexDirection: "row", 
        alignItems: "center", 
        borderWidth: 2, 
        borderColor: "#000", 
        backgroundColor: "#ADD8E6",
        borderRadius: 8, 
        padding: 15, 
        marginVertical: 10, 
        justifyContent: "center",
        width: "80%", 
    },
    buttonText: {
        fontSize: 18,
        color: "#000",
        fontWeight: "bold",
    },
});